<template>
  <div class="app-container">
    <div class="filter-container" style="display: flex;flex-direction: row;">
      <el-form ref="form" :model="form" label-width="100px" label-position="left" :inline="true">
        <label class="el-form-item__label">应用类型:</label>
        <el-select
          v-model="form.iApptype"
          placeholder="请选择应用类型"
          clearable
          class="filter-item"
          style="width: 130px"
        >
          <el-option
            v-for="item in orgList"
            :key="item.iAppnum"
            :label="item.strValue"
            :value="item.strCode"
          />
        </el-select>
        <label class="el-form-item__label" style="padding-left:12px;">应用名称:</label>
        <el-input
          v-model="form.strAppname"
          placeholder="请输入应用名称"
          style="width: 130px;"
          class="filter-item"
        />
        <label class="el-form-item__label" style="padding-left:12px;">起始日期:</label>
        <el-date-picker
          v-model="value"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        />
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          style="margin-left: 12px;"
          @click="handleSearch()"
        >搜索</el-button>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="dialogFormVisible = true"
        >新增应用</el-button>
      </el-form>
    </div>
    <el-table :data="listData" style="width: 100%" border>
      <el-table-column type="index" prop="id" align="center" label="序号" width="180" />
      <el-table-column prop="strAppname" align="center" label="应用名称" width="180" />
      <el-table-column prop="iApptypename" align="center" label="应用类型" />
      <el-table-column prop="strPackagename" align="center" label="应用包名">
        <template slot-scope="scope">{{ scope.row.strPackagename?scope.row.strPackagename:'/' }}</template>
      </el-table-column>
      <el-table-column prop="strCreatetime" align="center" label="创建时间" />
      <el-table-column align="center" label="操作">
        <template slot-scope="{row,$index}">
          <el-button size="mini" type="primary" @click="dialogFormVisible = true">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row,$index)">删除</el-button>
          <el-button
            size="mini"
            type="success"
            @click="ShowDetail(row,$index),dialogTableVisible = true"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--添加弹窗-->
    <el-dialog title="应用详情" :visible.sync="dialogTableVisible">
      <!--查看应用详情-->
      <el-table :data="gridData" border>
        <el-table-column prop="strAppname" label="应用名称" align="center" />
        <el-table-column prop="iApptypename" label="应用类型" align="center" />
        <el-table-column prop="strDetail" label="应用描述" align="center" />
        <el-table-column prop="strPackagename" label="应用包名称" align="center">
          <template scope="scope">{{ scope.row.strPackagename?scope.row.strPackagename:'/' }}</template>
        </el-table-column>
        <el-table-column prop="strCreatetime" label="创建时间" align="center" />
        <el-table-column prop="strOrgname" label="发布范围" align="center">
          <template scope="scope">{{ scope.row.strOrgname?scope.row.strOrgname:'/' }}</template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="新增应用" :visible.sync="dialogFormVisible">
      <!--新增应用页面表单-->
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="应用名称">
          <el-input v-model="ruleForm.strAppname" />
        </el-form-item>
        <el-form-item label="应用类型">
          <el-select v-model="ruleForm.iApptype" placeholder="请选择应用类型">
            <el-option
              v-for="item in orgList"
              :key="item.iAppnum"
              :label="item.strValue"
              :value="item.strCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="第三方包名称">
          <el-input v-model="ruleForm.strAppname" />
        </el-form-item>
        <el-form-item label="应用描述">
          <el-input v-model="ruleForm.strDetail" type="textarea" />
        </el-form-item>
        <el-form-item label="应用封面">
          <el-upload
            v-model="ruleForm.strCover"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt>
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt>
          </el-dialog>
        </el-form-item>
        <el-form-item label="发布范围">
          <el-tree
            v-model="ruleForm.valArr"
            :props="props"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">重 置</el-button>
        <el-button type="primary" @click="submitForm()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getdeploymentList,
  getselectList,
  addInfo,
  deleteInfo,
  detailTable,
  detailrelevance
} from '@/api/codeapi'

export default {
  data() {
    return {
      tableKey: 0,
      total: 0,
      listLoading: true,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      value: '',
      orgList: [],
      listData: [],
      gridData: [],

      // 新增弹窗内容
      dialogTableVisible: false, // 新增的表格
      dialogFormVisible: false, // 新增的form

      // 搜索表单
      form: {
        iApptype: '',
        strAppname: '',
        startTime: '',
        endTime: '',
        pagenum: 1
      },

      // 新增应用页面表单
      ruleForm: {
        iApptype: '1',
        strAppname: '测试1',
        strCover: 'hello.png',
        strPackagename: '1111',
        strDetail: 'hello',
        valArr: [1],
        deviceType: 1
      },
      // 树四级
      props: {
        label: 'name',
        children: 'zones'
      },
      count: 1
    }
  },

  // 页面打开加载
  created() {
    this.fetchList({ pagenum: 1 })
  },

  // 接口数据
  methods: {
    // 获取应用部署所有table数据
    fetchList(params) {
      getdeploymentList(params)
        .then(res => {
          this.listData = res.pages
        })
        .catch(err => {
          console.log(err)
        })
      // 获取应用类型数据select
      getselectList({ iType: 5 }).then(res => {
        this.orgList = res.syslist
      })
    },

    // 应用部署头部搜索
    handleSearch() {
      (this.form.startTime = this.value[0]),
      (this.form.endTime = this.value[1]),
      this.fetchList(this.form)
    },

    // 新增应用
    submitForm() {
      addInfo(this.ruleForm)
        .then(res => {})
        .catch(err => {
          console.log(err)
        })
    },

    // 查看应用详情
    ShowDetail(row, index) {
      detailTable({ iAppnum: row.iAppnum })
        .then(res => {
          this.gridData = []
          this.gridData.push(res.appInfo)
        })
        .catch(err => {
          console.log(err)
        })
      // (修改/详情)通过应用编号查询已经关联机构的应用信息
      detailrelevance({ iAppnum: row.iAppnum })
        .then(res => {
          // this.gridData.push(res.refAppOrganList)
          Object.assign(res.refAppOrganList, this.gridData) // 合并
          // res.refAppOrganList.map(item=>{this.gridData.push(item)})
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 删除列表
    handleDelete(row, index) {
      if (confirm('确定要删除吗') == true) {
        deleteInfo({ iAppnum: row.iAppnum })
          .then(res => {
            this.fetchList({ pagenum: 1 })
          })
          .catch(err => {
            console.log(err)
          })
      }
    },

    // 图片上传
    handleRemove(file) {
      console.log(file)
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    handleDownload(file) {
      console.log(file)
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 树四级
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },

    handleNodeClick(data) {
      console.log(data)
    },

    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '总行' }, { name: '柳州支行' }])
      }
      if (node.level > 3) return resolve([])
      var hasChild
      if (node.data.name === '总行') {
        hasChild = true
      } else if (node.data.name === '柳州支行') {
        hasChild = false
      } else {
        hasChild = Math.random() > 0.5
      }

      setTimeout(() => {
        var data
        if (hasChild) {
          data = [
            {
              name: '分行' + this.count++
            },
            {
              name: '支行' + this.count++
            }
          ]
        } else {
          data = []
        }
        resolve(data)
      }, 500)
    }
  }
}
</script>
